<template>名称:
  <el-input v-model="form.userName" placeholder="请输入菜单名称" clearable style="width: 300px;"/> &nbsp;
  <el-button type="primary" @click="GetLeading">查询</el-button>
  <div>
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="userName" label="姓名" width="80" />
    <el-table-column prop="name" label="部门" width="100" align="center">
      <template v-slot="scope">
        <span v-if="scope.row.sectorid==1">IT信息部</span>
        <span v-if="scope.row.sectorid==2">人力资源部</span>
        <span v-if="scope.row.sectorid==3">财务部</span>
      </template>
    </el-table-column>
    <el-table-column prop="leaveType" label="请假类别"  align="center"/>
    <el-table-column prop="leaveTime" label="请假时间"  align="center">
      <template v-slot="scope">
        <span style="font-size: 11px;font-weight: bold;">
          {{ (scope.row.leaveTime).substring(0,10) }}至{{ (scope.row.leaveTime).substring(20,31) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="总工时" width="70" align="center">
      <template v-slot="scope">
        <span>{{ scope.row.totaWorkTime }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="reportedTime" label="报道时间" align="center">
      <template v-slot="scope">
        <span style="font-size: 12px;font-weight: bold;">
          {{ (scope.row.reportedTime).substring(0,10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="leaveReason" label="请假事由" align="center"/>
    <el-table-column prop="departmentHeader" label="部门领导" align="center"/>
    <el-table-column  label="审批状态" align="center">
      <template v-slot="scope">
        <span v-if="scope.row.leaveState==false">待审核</span>
        <span v-if="scope.row.leaveState==true">已审核</span>
      </template>
    </el-table-column>
    <el-table-column prop="addTime" label="创建时间" width="120">
      <template v-slot="scope">
        <span style="font-size: 12px;font-weight: bold;" v-if="scope.row.addTime!=null">
          {{ (scope.row.addTime).substring(0,10) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100" align="center">
      <template v-slot="scope">
        <el-link type="warning" style="width: 30px;" @click="Update(scope.row.leaveId)">修改</el-link>&nbsp;
        <el-link type="danger" style="width: 30px;" @click="Del(scope.row.leaveId)">删除</el-link>
        <el-link type="danger" style="width: 30px;" @click="Updatea(scope.row.leaveId)"
        v-if="Name=='炸老刘' && scope.row.sectorid==3">审批</el-link>
        <el-link type="danger" style="width: 30px;" @click="Updatea(scope.row.leaveId)"
        v-if="Name=='王晓西' && scope.row.sectorid==2">审批</el-link>
        <el-link type="danger" style="width: 30px;" @click="Updatea(scope.row.leaveId)"
        v-if="Name=='张飒' && scope.row.sectorid==1">审批</el-link>
      </template>
    </el-table-column>
  </el-table>
  </div>
  
  <el-pagination 
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[4, 8 ,10]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.listCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
const Name=localStorage.getItem("username")
const form=reactive({
  pageIndex:1,
  pageSize:4,
  listCount:0,
  pageCount:0,
  userName:''
})

onMounted(()=>{
  GetLeading()
})

const tableData = ref([])
const GetLeading=()=>{
  axios.get('Leave/GetLeading', {
    params: {
      pageIndex:form.pageIndex,
      pageSize:form.pageSize,
      userName:form.userName
    }
  }).then((ret) => {
    console.log(ret.data)
    tableData.value=ret.data.lists
    form.listCount=ret.data.listCount
    form.pageCount=ret.data.pageCount
  })
}
const handleSizeChange = (val: number) => {
  form.pageSize=val
  GetLeading()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex=val
  GetLeading()
}

import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';
import axios from 'axios';
//删除
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Del=(row:any)=>{
  ElMessageBox.confirm(
    '确定删除吗？?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put('Leave/LeaveDelete?id='+ row
      ).then((ret) => {
        console.log(ret.data)
        if(ret.data>0){
          ElMessage.success('删除成功')
          GetLeading()
        }else{
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '取消',
      })
    })
}
//修改
const Update=(leaveId:number)=>{
  router.push({
    path:'/ExcusedUpda',
    query:{
      leaveId:leaveId
    }
  })
}
//审批
const Updatea=(leaveId:number)=>{
  router.push({
    path:'/VettingUpda',
    query:{
      leaveId:leaveId
    }
  })
}
</script>

<style scoped>

</style>